<!-- start -->
<template>
  <base-page-container activeTab="mine">
    <template #content>
      <view class="container">
        <view class="scroll-area">
          <!-- 个人信息区域 -->
          <view class="profile-section">
            <u-status-bar></u-status-bar>
            <view class="avatar-wrapper">
              <image
                class="avatar"
                :src="viewImg(userInfo.avatar)"
                mode="aspectFill" />
              <view class="user-info">
                <text class="nickname">{{ userInfo.nickName }}</text>
              </view>
            </view>
          </view>

          <!-- 功能模块区域 -->
          <view class="function-section">
            <!-- 数据统计卡片 -->
            <view class="stats-card">
              <view class="stat-item">
                <text class="stat-num">{{ recordData.collectCount }}</text>
                <text class="stat-label">收藏</text>
              </view>
              <view class="stat-item">
                <text class="stat-num">{{ recordData.viewCount }}</text>
                <text class="stat-label">浏览</text>
              </view>
              <view class="stat-item">
                <text class="stat-num">{{ recordData.recognitionCount }}</text>
                <text class="stat-label">识别</text>
              </view>
            </view>
            <!-- 功能列表 -->
            <view class="function-list">
              <view
                class="function-item"
                v-for="(item, index) in functionList"
                :key="index"
                @tap="handleFunctionClick(item.path)">
                <view class="function-item-left">
                  <view class="icon-wrapper">
                    <up-icon
                      :name="item.icon"
                      size="24"
                      :color="item.iconColor" />
                  </view>
                  <text class="function-title">{{ item.title }}</text>
                </view>
                <uni-icons type="right" size="16" color="#999999" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>
  </base-page-container>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { getMyData_api } from "@/api/api";
import { viewImg } from "@/utils/image";

const userInfo = ref({});
const functionList = ref([
  {
    path: "order/order",
    title: "我的订单",
    icon: "order",
    iconColor: "#FFB800",
  },
  {
    path: "collect/collect",
    title: "我的收藏",
    icon: "star",
    iconColor: "#FFB800",
  },
  {
    path: "history/view-history",
    title: "浏览历史",
    icon: "eye",
    iconColor: "#007AFF",
  },
  {
    path: "history/recognize",
    title: "识别记录",
    icon: "search",
    iconColor: "#4CD964",
  },
  {
    path: "settings/mine",
    title: "个人资料",
    icon: "account",
    iconColor: "#5856D6",
  },
  {
    path: "settings/help",
    title: "帮助中心",
    icon: "question-circle",
    iconColor: "#34C759",
  },
]);

const handleFunctionClick = (path) => {
  uni.navigateTo({
    url: `/subPackages/${path}`,
  });
};

const recordData = ref({ collectCount: 0, viewCount: 0, recognitionCount: 0 });
const getData = async () => {
  const res = await getMyData_api();
  recordData.value = Object.assign(recordData.value, res.data);
};
onLoad(async () => {
  getData();
  userInfo.value = uni.getStorageSync("userInfo");
});
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background: linear-gradient(180deg, #d2691e 0%, rgba(210, 105, 30, 0.1) 100%);
  overflow: hidden;
}

.scroll-area {
  height: 100%;
}
.profile-section {
  padding: 60rpx 32rpx;
  background: linear-gradient(135deg, #8b5a2b 0%, #d2691e 100%);
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0 0 40rpx 40rpx;
  box-shadow: 0 8rpx 16rpx rgba(139, 90, 43, 0.15);
  position: relative;
  z-index: 1;
}
.avatar-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20rpx 0;
}
.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  border: 6rpx solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}
.user-info {
  margin-left: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.nickname {
  font-size: 44rpx;
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
  margin-bottom: 8rpx;
}
.function-section {
  margin-top: -40rpx;
  padding: 0 32rpx;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}
.stats-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.85) 100%
  );
  backdrop-filter: blur(10px);
  border-radius: 24rpx;
  padding: 32rpx;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 8rpx 32rpx rgba(139, 90, 43, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-num {
  font-size: 44rpx;
  color: #8b5a2b;
  font-weight: 600;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}
.stat-label {
  margin-top: 8rpx;
  font-size: 28rpx;
  color: #666666;
}
.function-list {
  margin-top: 24rpx;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.85) 100%
  );
  backdrop-filter: blur(10px);
  border-radius: 24rpx;
  padding: 8rpx 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(139, 90, 43, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.function-item {
  height: 120rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(139, 90, 43, 0.1);
  transition: all 0.3s ease;
}
.function-item:last-child {
  border-bottom: none;
}
.function-item:active {
  background-color: rgba(139, 90, 43, 0.05);
}
.function-item-left {
  display: flex;
  align-items: center;
}
.icon-wrapper {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 20rpx;
  margin-right: 24rpx;
}
.function-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
}
</style>
<!-- end -->
